<template>
	<view class="page">
		<view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
			<view class="cu-bar fixed" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
				<view class="action" @tap="back">
					<text class="cuIcon-back"></text>
				</view>
				<view class="content text-blod text-black" :style="[{ top: StatusBar + 'px' }]">邀请好友</view>
			</view>
		</view>
		<view class="share-box bg-white flex flex-direction align-center justify-around" :style="{top:CustomBar+200+'px'}">
			<view class="user-info flex flex-direction align-center">
				<view class="avatar">
					<image radius="48" :src="userInfo.avatar" mode=""></image>
				</view>
				<view class="text-black margin-tb-sm">
					{{userInfo.user_name || userInfo.user_nickname}}
				</view>
				<view>
					<text class="text-666">邀请码：{{userInfo.invite_code}}</text>
					<text class="cuIcon-copy margin-left-sm text-lg" style="color: #FF3E05;" @click="copyContent(userInfo.invite_code)"></text>
				</view>
			</view>
			<view class="scancode">
				<image :src="shareCode" ></image>
			</view>
			<view class="bottom">
				<button class="" @click="createPoster">
					一键分享
				</button>
				<button class="" @click="saveImage">
					保存二维码到相册
				</button>
			</view>
		</view>
		<!-- 海报弹窗 start-->
		<lee-poster ref="poster" :info="shareInfos" @getPosterInfo="getPoster"></lee-poster>
		<!-- 海报弹窗 end-->
		<fu-notwork></fu-notwork>
	</view>
</template>
<script>
	import {
		BASE_URL
	} from '@/common/config.js';
	import leePoster from '../components/lee-poster/lee-poster.vue';
	import yzQr from "../components/yz-qr/yz-qr.vue";
	export default {
		components: {
			leePoster,
			yzQr
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				ctx: null,
				previewImageUrl: '',
				shareCode: '',
				// #ifdef MP-WEIXIN
				share_title:'这个小程序很不错，来试试吧',
				// #endif
				// #ifndef MP-WEIXIN
				share_title:'这个应用很不错，来试试吧',
				// #endif
			};
		},
		computed: {
			shareInfos() {
				return {
					title: this.share_title,
					summary: '你的好友' + (this.userInfo.user_name || this.userInfo.user_nickname) + '邀请你',
					name:this.userInfo.user_name || this.userInfo.user_nickname,
					avatar: this.userInfo.avatar || '/static/logo.png',
					href: BASE_URL + '/h5/registered/index.html?id=' + this.userInfo.invite_code,
					code: this.shareCode || '/static/logo.png', // 二维码
				};
			},
			userInfo() {
				return this.$store.getters.userInfo || null;
			}
		},
		onShow() {
			if (global.token) {
				this.getInfo();
			}
			this.getShareCode()
		},
		methods: {
			// 复制文本
			copyContent(txt) {
				let _this = this;
				uni.setClipboardData({
					data: txt.toString(),
					success: function() {
						_this.$u.toast("复制成功~")
					},
					fail: function() {
						_this.$u.toast("复制失败~")
					}
				});
			},
			createPoster() {
				if(global.token){
					this.$refs.poster.createPoster();
				}else{
					this.$u.toast('请先登录')
				}
			},
			/**
			 * @event
			 * @description  初始化海报
			 */
			getPoster() {
				this.$refs.poster.init();
			},
			hadleCopy(content) {
				uni.setClipboardData({
					data: content,
					success: () => {
						this.$message.success('复制成功')
					}
				});
			},
			// 打开弹窗
			openPopup() {
				this.$refs.share.open();
			},
			// 返回
			back() {
				uni.navigateBack();
			},
			// 获取二维码
			getShareCode() {
				this.$api.post(global.apiUrls.postJumpWechatCode,{
					invite_code:this.userInfo.invite_code
				}).then(res => {
					let data = res.data;
					if (data.code == 1) {
						let url = data.data.url;
						console.log('二维码路径', url);
						this.shareCode = url;
					} else {
						this.$message.info('获取分享二维码失败');
					}
				}).catch(err => {
					console.log(err);
				})
				return;
				// #ifndef MP-WEIXIN
				let url = BASE_URL + '/share?invite_code=' + this.userInfo.invite_code;
				this.$api.post(global.apiUrls.postMpwechatCode).then(res => {
					let data = res.data;
					if (data.code == 1) {
						let url = data.data.code_url;
						console.log('二维码路径', url);
						this.shareCode = url;
						// this.$refs.share.init();
					} else {
						this.$message.info('获取分享二维码失败');
					}
				}).catch(err => {
					console.log(err);
				})
				// #endif
				// #ifdef MP-WEIXIN
				// 要打开的小程序版本。正式版为 "release"，体验版为 "trial"，开发版为 "develop"。默认是正式版
				this.$api.post(global.apiUrls.inviteFriendCode,{
					env_version:'trial'
				}).then(res => {
					let data = res.data;
					if (data.code == 1) {
						let url = data.data.code_url;
						console.log('二维码路径', url);
						this.shareCode = url;
						// this.$refs.share.init();
					} else {
						this.$message.info('获取分享二维码失败');
					}
				}).catch(err => {
					console.log(err);
				})
				// #endif
			},

			// 获取用户信息
			getInfo() {
				this.$api.post(global.apiUrls.postGetUserInfo, {
					user_id: global.userInfo && global.userInfo.id || 0,
				}).then(res => {
					console.log(res);
					res = res.data;
					if (res.code == 1) {
						this.$store.commit('updateUserInfo', res.data);
						this.$forceUpdate();
					}
					uni.stopPullDownRefresh();
				})
			},
			// 保存图片
			saveImage() {
				uni.getImageInfo({
					src: this.shareCode,
					success: (img) => {
						uni.saveImageToPhotosAlbum({
							filePath: img.path,
							success: (res) => {
								this.$u.toast('保存成功');
							},
							fail: (err) => {
								this.$u.toast('保存失败');
							}
						})
					}
				})
			},
		},

	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background: url($IMGBASEURL+'/my/invite-bg.png') no-repeat;
		background-size: cover;
		.share-box{
			border-radius: 24rpx;
			width: 600rpx;
			height: 905rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			box-shadow: 2px 6px 9px 3px #efefef;
			.user-info{
				.avatar{
					width: 96rpx;
					height: 96rpx;
				}
			}
			.bottom {
				button{
					width: 480rpx;
					height: 88rpx;
					line-height: 88rpx;
					border-radius: 44rpx;
					font-size: 32rpx;
					font-weight: 500;
					&:first-child{
						background: #FF3E05;
						color: #FFFFFF;
						opacity: 1;
					}
					&:last-child{
						margin-top: 32rpx;
						border: 2rpx solid #FF3E05;
						color: #FF3E05;
					}
				}
				
			}
		}
		.bg {
			display: block;
			width: 100%;
			height: 100vh;
		}

		.scancode {
			padding: 15rpx;
			width: 300rpx;
			height: 300rpx;
			border-radius: 10rpx;
			background-color: white;
			image {
				width: 100%;
				height: 100%;
			}
		}

		

	}
</style>